<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/view/common/common.jsp"%>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抽奖转盘</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${ctx}/resources/lottery/css/lottery.css">
</head>
<style>
    body{
        margin:0;
        height:100%;
        overflow: auto;
        visibility: hidden;
        /*background-color: #f69290;*/
        font-size: .7rem;
    }
    #wheel-wrap{
        max-width:24rem;
        margin:0 auto;
        text-align: center;
        padding-top: 203px;
        background: url("${ctx}/resources/lottery/images/9.jpg") no-repeat 0 0 ;
        -webkit-background-size:100% 100%;
        background-size:100% 100%;
    }
    #rotate{
        position: relative;
        width:16rem;
        height:16rem;
        margin:0 auto;
        background: url("${ctx}/resources/lottery/images/wheelbg.gif") no-repeat 0 0 ;
        -webkit-background-size:100%;
        background-size:100%;
    }
    #rotatein{
        position: relative;
        top:1rem;
        left:1rem;
        border-radius: 50%;
        width:14rem;
        height:14rem;
        background:url("${ctx}/resources/lottery/images/bg.png");
        background-size: 100% 100%;
        box-shadow: 0 0 6px #000;
    }
    #pointer{
        position: absolute;
        top:50%;
        left:50%;
        z-index:3;
        -webkit-transform: translate(-50%,-50%);
        -moz-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        width:3rem;
        height:4rem;
        background: url("${ctx}/resources/lottery/images/pointer.png") no-repeat 0 0;
        background-size: 100% 100%;
    }
    .dialogclose .closebtn{
        position: absolute;
        top:.5rem;
        right:.5rem;
        display: inline-block;
        width:1rem;
        height:1rem;
        background:url("${ctx}/resources/lottery/images/btn_close_layer.png") no-repeat 0 0 ;
        -webkit-background-size:100% 100%;
        background-size:100% 100%;
    }
    .scroll-box {
        width:100%;
        height:120px;
        /*border:1px solid #daad54;*/
        margin:5px auto;
        overflow:hidden;
    }
    .scroll-box ul {
        list-style:none;
        width:100%;
        height:100%;
    }
    .scroll-box ul li {
        width:100%;
        height:30px;
        box-sizing:border-box;
        line-height:30px;
        text-align:center;
        color: #ffc7c8;
        font-size: 13px;
    }
    #strong{
        font-size: 12px;
    }
    #span{
        font-size: 12px;
        color: #ab0404;
    }
    #ruleBTN{
        color: black;
        position: fixed;
        top: 170px;
        left: 286px;
    }
    #myPrizeBTN{
        color: black;
        position: fixed;
        top: 100px;
        left: 300px;
    }
</style>
<body>
<div id="wheel-wrap">
    <%--<div>--%>
        <%--<c:forEach items="${activity}" var="g">--%>
            <%--<p id="w-tit">${g.name}</p>--%>
        <%--</c:forEach>--%>
    <%--</div>--%>

    <%--<input id="myPrizeBTN" type="button" value="我的奖品" />--%>
        <div id="myPrizeBTN">
            <img src="${ctx}/resources/lottery/images/29.png" />
        </div>

    <div id="myPrizeDIV" style="display: none">

        <table style="font-size: 14px;text-align: center; color: #ab0404;line-height: 20px;">
            <tr>
                <td colspan="2" style="font-size: 20px;text-align: center;">【我的中奖信息】</td>
            </tr>
            <c:forEach items="${listRecord}" var="record">
            <tr>
                <td width="86px">奖项等级:</td>
                <td>${record.level}</td>
            </tr>
            <tr>
                <td width="86px">奖品名称:</td>
                <td>${record.names}</td>
            </tr>
            <tr>
                <td width="86px">奖品信息:</td>
                <td>${record.name}</td>
            </tr>
            <tr>
                <td width="86px">兑奖方式:</td>
                <td>线下兑奖</td>
            </tr>
            <tr>
                <td width="86px">兑奖券码:</td>
                <td>${record.redeemCode}</td>
            </tr>
            <tr>
                <td width="86px">有效日期:</td>
                <td>${record.effeDateBegin}至${record.effeDateEnd}下午3点前(逾期视为放弃)</td>
            </tr>
            </c:forEach>
        </table>

        <input id="quxiao" type="button" value="收起来" />
    </div>
    <script type="text/javascript">
        var myBtn = document.getElementById('myPrizeBTN');
        var myDiv = document.getElementById('myPrizeDIV');
        myBtn.onclick=function(){
            myDiv.style.cssText = 'position:absolute;opacity: 0.9; top:0px; left:0px; width:100%; height:100%; z-index:10; background:#ffe8e6; display:block;';
        };
        var quxiao = document.getElementById('quxiao');
        quxiao.onclick=function(){
            myDiv.style.cssText = 'display:none;';
        };
    </script>

        <div id="ruleBTN">
            <img src="${ctx}/resources/lottery/images/57.png"/>
        </div>
    <%--<input id="ruleBTN" type="button" value="活动规则说明" />--%>
    <div id="ruleDIV" style="display: none">
        <c:forEach items="${activity}" var="g">
            <p id="w-rule">${g.rule}</p>
        </c:forEach>
        <input id="quxiao2" type="button" value="收起来" />
    </div>

    <script>
        var ruleBtn = document.getElementById('ruleBTN');
        var ruleDiv = document.getElementById('ruleDIV');
        ruleBtn.onclick=function(){
            ruleDiv.style.cssText = 'position:absolute;opacity: 0.9; top:0px; left:0px; width:100%; height:100%; z-index:10; background:#ffe8e6; display:block;';
        };
        var quxiao1 = document.getElementById('quxiao2');
        quxiao1.onclick=function(){
            ruleDiv.style.cssText = 'display:none;';
        };
    </script>

    <div id="w-main">
        <div id="rotate">
            <div id="pointer"></div>
            <div id="rotatein">
                    <c:forEach items="${prize}" var="g">
                        <div class="prize prize_1"><strong id="strong">${g.name}</strong><br><span id="span">${g.level}</span></div>
                    </c:forEach>
            </div>
        </div>
    </div>
    <div id="w-foot">
        <%--<div class="tiemsbox">您有<span class="times"></span>次抽奖机会</div>--%>
        <%--<p id="rule">查看活动规则</p>--%>
    </div>
    <%--<div>--%>
        <%--&lt;%&ndash;<p style="width: 100%"><img src="/resources/lottery/images/activity.png"></p>&ndash;%&gt;--%>
        <%--<c:forEach items="${activity}" var="g">--%>
            <%--<p>${g.rule}</p>--%>
        <%--</c:forEach>--%>
    <%--</div>--%>

    <div>
        <%--<img src="/resources/lottery/images/11.png" />--%>
        <div class="scroll-box">
            <ul>
                <c:forEach items="${lotteryList}" var="g">
                    <li>${g.realName}&nbsp;-&nbsp;${g.level}&nbsp;-&nbsp;${g.name}</li>
                </c:forEach>
            </ul>
        </div>
    </div>

    <div id="dialogbox">
        <div class="dialogmask"></div>
        <div class="dialogcard">
            <div class="dialogclose">
                <span class="closebtn"></span>
            </div>
            <div class="card1">
                <div  class="dialogtit">
                    恭喜您!获得了：
                    <div id="dialogtitImg">
                    </div>
                    <span id="award"></span>
                </div>
                <div>
                    <ul>
                        <li>
                            兑奖方式：线下兑奖-(联系你的上级代理)
                        </li>
                    </ul>
                </div>
            </div>
            <div class="card2">
                <p>很遗憾您未中奖!下次再来吧!</p>
            </div>
            <div class="card3">
                <p>您的抽奖机会已用完!下次再来吧!</p>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    setSize();
    window.addEventListener("resize",setSize,false);
    function setSize(){
        var oHtml = document.getElementsByTagName("html")[0];
        var oBody = document.getElementsByTagName("body")[0];
        var oWidth = window.innerWidth < 480 ? window.innerWidth : 480;
        oHtml.style.fontSize =oWidth/18+"px";
        oBody.style.visibility = "visible";
    };
</script>
<script type="text/javascript" src="${ctx}/resources/lottery/js/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
            //获得当前<ul>
            var $uList = $(".scroll-box ul");
            var timer = null;
            //触摸清空定时器
            $uList.hover(function() {
                    clearInterval(timer);
                },
                function() { //离开启动定时器
                    timer = setInterval(function() {
                            scrollList($uList);
                        },
                        1000);
                }).trigger("mouseleave"); //自动触发触摸事件
            //滚动动画
            function scrollList(obj) {
                //获得当前<li>的高度
                var scrollHeight = $("ul li:first").height();
                //滚动出一个<li>的高度
                $uList.stop().animate({
                        marginTop: -scrollHeight
                    },
                    600,
                    function() {
                        //动画结束后，将当前<ul>marginTop置为初始值0状态，再将第一个<li>拼接到末尾。
                        $uList.css({
                            marginTop: 0
                        }).find("li:first").appendTo($uList);
                    });
            }
        //接收抽奖码
        var lotteryCode;

        //点击抽奖
        var timecont = 99999999; //定死
        var oDialog = $("#dialogbox");
        $(".times").text(timecont);
        $(".closebtn ").click(function () {
            $(oDialog).removeClass("active");
            $(oDialog).find("div[class^='card']").removeClass("active");
        });
        $(".dialogmask").click(function () {
            $(oDialog).removeClass("active");
            $(oDialog).find("div[class^='card']").removeClass("active");
        });
        $("#pointer").click(function () {
            var addArr = new Array();
            //判断抽奖码
            lotteryCode = prompt("请输入您的抽奖码：");
            if(lotteryCode != null && lotteryCode != ""){
                var urlUser = "<c:url value="/mobile/MyPrize.json" />";
                $.ajax({
                    url:urlUser,
                    type:'get',
                    data:{
                        lotteryCode:lotteryCode
                    },
                    dataType:'json',
                    success:function(data){
                        if(data.message != "操作成功" || data.flag != 0){
                            //alert("抱歉：您已经参与过本次活动的抽奖了!敬请期待下次活动吧!");
                            alert("抱歉：您输入的验证码无效!(活动尚未开始或结束)");
                        }else{
                            //验证抽奖码
                            var url = "<c:url value="/mobile/ValidateJCCode.json" />";
                            $.ajax({
                                url:url,
                                type:'get',
                                data: {
                                    code:lotteryCode
                                },
                                dataType:'json',
                                success:function(data){
                                    addArr = data;
                                    lotteryCode = addArr[0].cjCodeSion;
                                    if(data.length > 0){
                                        if(timecont > 0){
                                            //这里好坑 扯犊子啊
                                            // if(intArr[7]==2){
                                            //     flag=2;
                                            // }
                                            handlebar();
                                        }else if(timecont == 0){
                                            flag = 3;
                                            dialoginfo(flag);
                                            timecont ++ ;
                                        };
                                        timecont -- ;
                                        $(".times").text(timecont);
                                        if(flag == 1){
                                            //加入中奖表
                                            var postUrl = "<c:url value="/mobile/AddWinner.json" />";
                                            $.ajax({
                                                url:postUrl,
                                                type:'get',
                                                data:{
                                                    code:lotteryCode
                                                },
                                                dataType:'json',
                                                success:function(data){
                                                }
                                            });
                                        }
                                    }else{
                                        alert("您输入的抽奖码校验失败!");
                                    }
                                },
                                error:function(){
                                    alert("抽奖码校验失败，输入错误!");
                                }
                            });
                        }
                    }
                });
            }else{
                alert("输入抽奖码后即可抽奖!");
            }
        });

        //确定概率
        function posibility(){
            // var random = parseInt(Math.random()*1000);
            var random = lotteryCode;
            if( random >= 10000001 && random <= 20000001 ){
                return 337.5;
            }else if( random >= 20000002 && random <= 30000002 ){
                return 247.5;
            }else if( random >= 30000003 && random <= 40000003 ){
                return 157.5;
            }else if( random >= 40000004 && random <= 50000004 ){
                return 67.5;
            }else if( random >= 50000005 && random <= 60000005 ){
                return 292.5;
            }else if( random >= 60000006 && random <= 70000006 ){
                return 202.5;
            }else if( random >= 70000007 && random <= 80000007 ){
                return 112.5;
            }else{
                //大于80000007的
                return 22.5;
            }
        };

        //获取奖品数组
        var arr = new Array();
        var urlArr = "<c:url value="/mobile/lottery.json" />";
        $.ajax({
            url:urlArr,
            type:'get',
            dataType:'json',
            success:function(data){
                arr = data;
            }
        });

        //是否可以中这个奖品
        var intArr = new Array();
        var urlArr = "<c:url value="/mobile/flag.json" />";
        $.ajax({
            url:urlArr,
            type:'get',
            dataType:'json',
            success:function(data){
                intArr = data;
            }
        });

        //raward 获奖情况
        var flag = 0;
        function raward(rotate){
            switch (rotate){
                case 337.5 :
                    {
                        if(intArr[0]==1){
                            flag=1;
                            return arr[0];
                            break;
                        }else{
                            flag=2;
                            break;
                        }
                    }
                case 292.5 :
                    {
                        if(intArr[1]==1){
                            flag=1;
                            return arr[1];
                            break;
                        }else{
                            flag=2;
                            break;
                        }
                    }
                case 247.5 :
                    {
                        if(intArr[2]==1){
                            flag=1;
                            return arr[2];
                            break;
                        }else{
                            flag=2;
                            break;
                        }
                    }
                case 202.5 :
                    {
                        if(intArr[3]==1){
                            flag=1;
                            return arr[3];
                            break;
                        }else{
                            flag=2;
                            break;
                        }
                    }
                case 157.5 :
                    {
                        if(intArr[4]==1){
                            flag=1;
                            return arr[4];
                            break;
                        }else{
                            flag=2;
                            break;
                        }
                    }
                case 112.5 :
                    {
                        if(intArr[5]==1){
                            flag=1;
                            return arr[5];
                            break;
                        }else{
                            flag=2;
                            break;
                        }
                    }
                case 67.5  :
                    {
                        if(intArr[6]==1){
                            flag=1;
                            return arr[6];
                            break;
                        }else{
                            flag=2;
                            break;
                        }
                    }
                case 22.5  :
                    {
                        if(intArr[7]==1){
                            flag=1;
                            return arr[7];
                            break;
                        }else{
                            flag=2;
                            break;
                        }
                    }
                default : {flag=2; return '很遗憾您未中奖!下次再来吧!'}
            }
        }

        //服了
        <%--var arrCode = new Array();--%>
        <%--var urlArr = "<c:url value="/mobile/cjCode.json" />";--%>
        <%--$.ajax({--%>
            <%--url:urlArr,--%>
            <%--type:'get',--%>
            <%--dataType:'json',--%>
            <%--success:function(data){--%>
                <%--arrCode = data;--%>
            <%--}--%>
        <%--});--%>

        // if(1000 < arrCode[0] && arrCode[0] < 2000){
        //     return 800;
        // }else if(2000 < arrCode[1] && arrCode[1] < 3000){
        //     return 2000;
        // }else if(3000 < arrCode[2] && arrCode[2] < 4000){
        //     return 3000;
        // }
        // else if(4000 < arrCode[3] && arrCode[3] < 5000){
        //     return 4000;
        // }
        // else if(5000 < arrCode[4] && arrCode[4] < 6000){
        //     return 5000;
        // }
        // else if(6000 < arrCode[5] && arrCode[5] < 7000){
        //     return 6000
        // }
        // else if(7000 < arrCode[6] && arrCode[6] < 8000){
        //     return 7000;
        // }
        // else if(8000 < arrCode[7] && arrCode[7] < 9000){
        //     return 8000;
        // }else{
        //     return 9000;
        // }

        //转盘逻辑计算
        // var initrotate = 0;
        // function handlebar() {
        //     var rotate = initrotate + (360 - initrotate%360);
        //     $("#rotatein").css({
        //         "-webkit-transition": "all 2s ease-out",
        //         "-ms-transition": "all 2s ease-out",
        //         "transition":" all 2s ease-out",
        //         "-webkit-transform": "rotate("+ rotate +"deg)",
        //         "-moz-transform": "rotate("+ rotate +"deg)",
        //         "-ms-transform": "rotate("+ rotate +"deg)",
        //         "-o-transform": "rotate("+ rotate +"deg)",
        //         "transform":"rotate("+ rotate +"deg)"
        //     });
        //     initrotate = rotate;
        //     var rawartText = raward(rotate%360);
        //     setTimeout(function () {
        //         dialoginfo(flag , rawartText);
        //     },2500)
        // };

        //重新计算转盘逻辑
        var initrotate = 0;
        function handlebar() {
            var rotate = initrotate + (360 - initrotate%360) + 360 + posibility();
            $("#rotatein").css({
                "-webkit-transition": "all 2s ease-out",
                "-ms-transition": "all 2s ease-out",
                "transition":" all 2s ease-out",
                "-webkit-transform": "rotate("+ rotate +"deg)",
                "-moz-transform": "rotate("+ rotate +"deg)",
                "-ms-transform": "rotate("+ rotate +"deg)",
                "-o-transform": "rotate("+ rotate +"deg)",
                "transform":"rotate("+ rotate +"deg)"
            });
            initrotate = rotate;
            var rawartText = raward(rotate%360);
            if(rawartText == "别克英朗"){
                document.getElementById("dialogtitImg").innerHTML='<img src="${ctx}/resources/lottery/images/te.png" width="146px" height="69px" />';
            }
            else if(rawartText == "iPhone XS MAX"){
                document.getElementById("dialogtitImg").innerHTML='<img src="${ctx}/resources/lottery/images/yi.png" width="100px" height="100px" />';
            }
            else if(rawartText == "定制钻戒一枚"){
                document.getElementById("dialogtitImg").innerHTML='<img src="${ctx}/resources/lottery/images/er.png" width="100px" height="1000px" />';
            }
            else if(rawartText == "天猫精灵AI音箱"){
                document.getElementById("dialogtitImg").innerHTML='<img src="${ctx}/resources/lottery/images/san.png" width="142px" height="66px" />';
            }
            else if(rawartText == "定制商务礼盒"){
                document.getElementById("dialogtitImg").innerHTML='<img src="${ctx}/resources/lottery/images/wu.png" width="100px" height="100px" />';
            }
            else if(rawartText == "火鸡姑娘创业礼包"){
                document.getElementById("dialogtitImg").innerHTML='<img src="${ctx}/resources/lottery/images/wu.png" width="100px" height="100px" />';
            }
            else if(rawartText == "公仔一个"){
                document.getElementById("dialogtitImg").innerHTML='<img src="${ctx}/resources/lottery/images/liu.png" width="88px" height="100px" />';
            }
            else{
                //公仔
                document.getElementById("dialogtitImg").innerHTML='<img src="${ctx}/resources/lottery/images/liu.png" width="88px" height="100px" />';
            }
            setTimeout(function () {
                dialoginfo(flag , rawartText);
            },2100)
        };
        //是否中奖提示
        function dialoginfo(flag,rawartText){
            $(oDialog).find("div[class^='card']").removeClass("active");
            if(flag == 1){
                $(oDialog).find(".card1").addClass("active");
                $(oDialog).find("#award").text(""+ rawartText + "");
                $(oDialog).addClass("active");
            }else if (flag == 2){
                $(oDialog).find(".card2").addClass("active");
                $(oDialog).addClass("active");
            }else if(flag == 3){
                $(oDialog).find(".card3").addClass("active");
                $(oDialog).addClass("active");
            }
        };
    });
</script>
</body>
</html>